<style lang="scss" scoped>
.search_wrap {
  background: #fff;
  border-radius: 2px;
  margin-bottom: 10px;
}
.main_wrap {
  background: #fff;
  padding: 20px 0;
  .main_tit {
    text-align: center;
    padding: 0 0 20px;
    border-bottom: 1px solid rgb(240, 240, 240);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
  }
  .rank_wrap {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rank_table_wrap {
    padding: 0 10px 30px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    .rank_table_item {
      margin-right: 10px;
      flex: 1;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      overflow: hidden;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .chart_wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    .chart_item {
      flex: 1;
      margin-right: 20px;
      background: rgb(236, 239, 245);
      border-radius: 4px;
      padding: 20px 10px 10px;
      &:last-child {
        margin-right: 0;
      }
      .item_tit {
        text-align: center;
        font-size: 16px;
      }
      .item_desc {
        margin-top: 10px;
        text-align: right;
        font-size: 12px;
        padding-right: 20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>

<template>
  <div class="search_wrap">
    <Search @initParams="initParams" @submit="handleSubmit" :showName="false"/>
  </div>
  <div class="main_wrap">
    <div class="main_tit">{{ showTime }}投放数据看版</div>
    <div class="rank_wrap">
      <common-title title="消耗排行榜" />
      <filter-form @change="handleFilterChange" />
    </div>
    <div class="rank_table_wrap">
      <div class="rank_table_item">
        <rank-more title="投手当日消耗排名" @look-more="handleLookMore(1)" />
        <el-table :data="pageData.todayCostList" style="width: 100%">
          <el-table-column
            fixed
            align="center"
            prop="date"
            label="排名"
            width="60"
          >
            <template #default="scope">
              <tableRank :rank="scope.$index" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="投手"
            show-overflow-tooltip
            minWidth="80"
          />
          <el-table-column
            align="center"
            prop="cost"
            label="消耗(元)"
            minWidth="120"
          >
            <template #header>
              <div class="tab_header">
                消耗(元) <img src="@/assets/layout/sort.png" alt="">
              </div>
            </template>
            <template #default="scope">
              {{ (scope.row.realCost || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="realBrokerage"
            label="回收(元)"
            minWidth="120"
          >
            <template #default="scope">
              {{ (scope.row.realBrokerage || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="roi"
            label="实时ROI"
            minWidth="80"
          >
            <template #default="scope">
              {{ scope.row.roi || 0 }}%
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="bookName"
            label="书名"
            minWidth="120"
            show-overflow-tooltip
          /> -->
        </el-table>
      </div>
      <div class="rank_table_item">
        <rank-more
          @look-more="handleLookMore(2)"
          title="投手当月消耗排名"
          color="#29c0eb"
        />
        <el-table :data="pageData.monthCostList" style="width: 100%">
          <el-table-column
            fixed
            align="center"
            prop="date"
            label="排名"
            width="60"
          >
            <template #default="scope">
              <tableRank :rank="scope.$index" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="投手"
            minWidth="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="cost"
            label="累计消耗(元)"
            minWidth="140"
          >
            <template #header>
              <div class="tab_header">
                累计消耗(元) <img src="@/assets/layout/sort.png" alt="">
              </div>
            </template>
            <template #default="scope">
              {{ (scope.row.realCost || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="realBrokerage"
            label="回收(元)"
            minWidth="120"
          >
            <template #default="scope">
              {{ (scope.row.realBrokerage || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="roi"
            label="累计ROI"
            minWidth="100"
          >
            <template #default="scope">
              {{ scope.row.roi || 0 }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="rank_table_item">
        <rank-more
          @look-more="handleLookMore(3)"
          title="素材当月消耗排名"
          color="#e1c023"
        />
        <el-table :data="pageData.userVideoRank" style="width: 100%">
          <el-table-column
            fixed
            align="center"
            prop="date"
            label="排名"
            width="60"
          >
            <template #default="scope">
              <tableRank :rank="scope.$index" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="投手"
            minWidth="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="name"
            label="素材"
            minWidth="120"
          >
            <template #default="scope">
              <video-bac :video="scope.row.vedioDto || {}"/>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="消耗(元)"
            minWidth="120"
          >
            <template #header>
              <div class="tab_header">
                消耗(元) <img src="@/assets/layout/sort.png" alt="">
              </div>
            </template>
            <template #default="scope">
              {{ (scope.row.cost || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="实时ROI"
            minWidth="100"
          >
            <template #default="scope">
              {{ scope.row.roi || 0 }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <common-title title="消耗统计排行榜" style="margin-bottom: 20px" />
    <div class="chart_wrap">
      <div class="chart_item">
        <div class="item_tit">投手当日消耗统计排行</div>
        <div class="item_desc">消耗(元)</div>
        <rank-chart :list="pageData.totalTodayRank" />
        <el-empty v-if="!pageData.totalTodayRank.length" :image-size="100" />
      </div>
      <div class="chart_item">
        <div class="item_tit">投手当月消耗统计排行</div>
        <div class="item_desc">消耗(元)</div>
        <rank-chart :list="pageData.totalMonthRank" />
        <el-empty v-if="!pageData.totalMonthRank.length" :image-size="100" />
      </div>
    </div>
  </div>
</template>

<script setup>
import FilterForm from "./component/filterForm.vue";
import Search from "./component/search.vue";
import commonTitle from "@/components/commonTitle.vue";
import tableRank from "@/components/tableRank.vue";
import RankMore from "./component/rankMore.vue";
import videoBac from './component/videoBac.vue'
import { useRouter } from "vue-router";
import RankChart from "./component/rankChart.vue";
import { reactive, computed } from "vue";
import { AnalyzePageRecords } from "@/apis/analyze";
import { getCurrentMonth, formateTime } from '@/utils/time'
const router = useRouter();
const showTime = computed(() => {
  return formateTime(pageData.formData.day, 'YYYY年MM月DD日')
})
const handleLookMore = (type) => {
  const { pager, groupByType, ...rest} = pageData.formData
  router.push({
    path: "/bulletin-board-more",
    query: { type, ...rest }
  });
};
const pageData = reactive({
  todayCostList: [],
  monthCostList: [],
  totalTodayRank: [],
  totalMonthRank: [],
  userVideoRank: [],
  formData: {
    groupByType: "BOOK_USER",
    pager: {
      currentPage: 1,
      pageSize: 5,
    },
  },
});
const handleFilterChange = (values) => {
  Object.assign(pageData.formData, values);
  handleSearch();
};
const handleSubmit = (formData) => {
  Object.assign(pageData.formData, formData);
  handleSearch();
};

const handleSearch = async () => {
  getTodayCostTotalRank();
  getTodayCostRank();
  getMonthCostRank();
  getMonthCostMonthRank()
  getUserVideoRank()
}
const initParams = params => {
  Object.assign(pageData.formData, params)
}
// 获取投手当日消耗排名
const getTodayCostRank = async () => {
  const res = await AnalyzePageRecords(pageData.formData);
  pageData.todayCostList = res.records || []
}
// 获取投手当月消耗排名
const getMonthCostRank = async () => {
  const params = { ...pageData.formData, ...getCurrentMonth(pageData.formData.day) }
  delete params.day
  const res = await AnalyzePageRecords(params);
  pageData.monthCostList = res.records || []
}
// 投手当日消耗统计排行
const getTodayCostTotalRank = async () => {
  const params = {...pageData.formData, groupByType: "USER"}
  const res = await AnalyzePageRecords(params);
  pageData.totalTodayRank = res.records || []
}
// 投手当月消耗统计排行
const getMonthCostMonthRank = async () => {
  const params = {...pageData.formData, groupByType: "USER", ...getCurrentMonth(pageData.formData.day)}
  delete params.day
  const res = await AnalyzePageRecords(params);
  pageData.totalMonthRank = res.records || []
}
// 素材当月消耗排名
const getUserVideoRank = async () => {
  const params = {...pageData.formData, groupByType: "USER_VIDEO", ...getCurrentMonth(pageData.formData.day)}
  delete params.day
  const res = await AnalyzePageRecords(params);
  pageData.userVideoRank = res.records || []
}
</script>